<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // --- Style settings ---
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2.5;
        ctx.font = "bold 24px 'Comic Sans MS', cursive, sans-serif";
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // Helper function to draw an arrow
        function drawArrow(fromX, fromY, toX, toY) {
            const headlen = 10; // length of head in pixels
            const dx = toX - fromX;
            const dy = toY - fromY;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            ctx.moveTo(fromX, fromY);
            ctx.lineTo(toX, toY);
            ctx.lineTo(toX - headlen * Math.cos(angle - Math.PI / 6), toY - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headlen * Math.cos(angle + Math.PI / 6), toY - headlen * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // Helper function to draw text with a subscript
        function drawSubscriptedText(mainText, subText, x, y) {
            const originalFont = ctx.font;
            const subFont = "bold 18px 'Comic Sans MS', cursive, sans-serif";
            const mainTextWidth = ctx.measureText(mainText).width;
            
            ctx.font = originalFont;
            ctx.fillText(mainText, x, y);
            
            ctx.font = subFont;
            ctx.fillText(subText, x + mainTextWidth / 2 + 4, y + 6);

            ctx.font = originalFont; // Reset font
        }
        
        // --- Component coordinates ---
        const groundY = 300;
        
        // Block M
        const m_x = 120;
        const m_y = 200;
        const m_w = 230;
        const m_h = 100;

        // Block m1
        const m1_w = 80;
        const m1_h = 40;
        const m1_x = 180;
        const m1_y = m_y - m1_h;

        // Block m2
        const m2_w = 60;
        const m2_h = 50;
        const m2_x = m_x + m_w;
        const m2_y = 210;

        // Pulley
        const pulleySupportX = m_x + m_w - 10;
        const pulleySupportY = m_y;
        const pulleyCenterX = pulleySupportX + 20;
        const pulleyCenterY = m_y - 30;
        const pulleyRadius = 10;


        // --- Drawing functions ---

        // Draw the ground
        ctx.beginPath();
        ctx.moveTo(20, groundY);
        ctx.lineTo(480, groundY);
        ctx.stroke();
        // Draw hatches for the ground
        for (let i = 25; i < 480; i += 20) {
            ctx.beginPath();
            ctx.moveTo(i, groundY);
            ctx.lineTo(i - 10, groundY + 10);
            ctx.stroke();
        }

        // Draw Block M
        ctx.beginPath();
        ctx.rect(m_x, m_y, m_w, m_h);
        ctx.stroke();
        ctx.fillText('M', m_x + m_w / 2, m_y + m_h / 2);

        // Draw Block m1
        ctx.beginPath();
        ctx.rect(m1_x, m1_y, m1_w, m1_h);
        ctx.stroke();
        drawSubscriptedText('m', '1', m1_x + m1_w / 2 - 5, m1_y + m1_h / 2);

        // Draw the pulley system
        // Support bracket
        ctx.beginPath();
        ctx.moveTo(pulleySupportX, pulleySupportY);
        ctx.lineTo(pulleyCenterX, pulleyCenterY + pulleyRadius);
        ctx.stroke();
        // Pulley wheel
        ctx.beginPath();
        ctx.arc(pulleyCenterX, pulleyCenterY, pulleyRadius, 0, 2 * Math.PI);
        ctx.stroke();
        // Pulley axle
        ctx.beginPath();
        ctx.arc(pulleyCenterX, pulleyCenterY, 2, 0, 2 * Math.PI);
        ctx.fill();

        // Draw Block m2
        ctx.beginPath();
        ctx.rect(m2_x, m2_y, m2_w, m2_h);
        ctx.stroke();
        drawSubscriptedText('m', '2', m2_x + m2_w / 2 - 5, m2_y + m2_h / 2);

        // Draw the string
        const stringY = pulleyCenterY - pulleyRadius;
        ctx.beginPath();
        // From m1 to pulley
        ctx.moveTo(m1_x + m1_w, stringY);
        ctx.lineTo(pulleyCenterX, stringY);
        // Arc over pulley
        ctx.arc(pulleyCenterX, pulleyCenterY, pulleyRadius, -Math.PI / 2, 0);
        // From pulley down to m2
        ctx.lineTo(pulleyCenterX + pulleyRadius, m2_y);
        ctx.stroke();

        // Draw Force F
        const forceY = m_y + m_h / 2;
        drawArrow(50, forceY, m_x, forceY);
        ctx.fillText('F', 40, forceY);

        // Draw the figure label
        ctx.font = "20px 'Times New Roman', serif";
        ctx.fillText('Fig. 1.6.', canvas.width / 2, groundY + 50);

    </script>
</body>
</html>